<template>
  <div class="address-section">
    <div class="address-header">
      <h3>收货地址</h3>
      <el-button type="primary" size="small" @click="showAddressDialog">
        新增地址
      </el-button>
    </div>
    <div class="address-list">
      <el-card v-for="address in orderStore.addresses" :key="address.id" class="address-item">
        <div class="address-content">
          <div class="address-info">
            <p class="name-phone">
              <span>{{ address.recipientName }}</span>
              <span>{{ address.phoneNumber }}</span>
              <el-tag v-if="address.isDefault==true" type="danger" size="small">默认地址</el-tag>
            </p>
            <p class="address-detail">{{ address.province + address.city + address.district + address.streetAddress }}</p>
          </div>
          <div class="address-actions">
            <el-button type="text" @click="editAddress(address)">编辑</el-button>
            <el-button type="text" @click="deleteAddress(address.id)">删除</el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 地址编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
      <el-form :model="addressForm" :rules="rules" ref="addressFormRef" label-width="100px">
        <el-form-item label="收货人" prop="recipientName">
          <el-input v-model="addressForm.recipientName"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phoneNumber">
          <el-input v-model="addressForm.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="所在地区" prop="region">
          <area-selector 
            v-model="addressForm.region"
            :regionData="regionData"
            :codeToText="codeToText"
          />
        </el-form-item>
        <el-form-item label="详细地址" prop="streetAddress">
          <el-input type="textarea" v-model="addressForm.streetAddress"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="addressForm.isDefault">设为默认地址</el-checkbox>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="back()">取 消</el-button>
          <el-button type="primary" @click="saveAddress">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import AreaSelector from '@/components/AreaSelector.vue'
import { regionData, codeToText } from 'element-china-area-data'
import { useOrderStore } from '@/stores/orderStore'
import { useAddress } from '@/composables/useAddress'

const orderStore = useOrderStore()
const {
  dialogVisible,
  dialogTitle,
  addressForm,
  addressFormRef,
  rules,
  showAddressDialog,
  editAddress,
  back,
  saveAddress,
  deleteAddress
} = useAddress()

onMounted(() => {
  orderStore.findAddresses()
})
</script>

<style scoped>
.address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.address-header h3 {
  margin: 0;
}

.address-item {
  margin-bottom: 15px;
}

.address-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.name-phone {
  margin: 0 0 10px;
}

.name-phone span {
  margin-right: 20px;
}

.address-detail {
  color: #606266;
  margin: 0;
}

.address-actions {
  display: flex;
  gap: 10px;
}
</style>